<template>
    <el-table :data="datas.slice((pageNum-1)*pageSize,pageNum*pageSize)" style="width: 100%" max-height="250" border>
        <el-table-column fixed label="序号" width="100">
            <template #default="scopes">
                {{ scopes.$index+1 }}
            </template>
        </el-table-column>
        <el-table-column fixed prop="college" label="学院" width="200" />
        <el-table-column fixed prop="grade" label="年级" width="400" />
        <el-table-column fixed="right" label="操作" width="200">
            <template #default="scope">
                <div>
                    <el-button
                            link
                            type="primary"
                            size="small"
                            @click.prevent="deleteRow(scope.$index)"
                    >
                        删除
                    </el-button>
                    <el-button
                            link
                            type="primary"
                            size="small"
                            @click.prevent="update(scope.row)"
                    >
                        修改
                    </el-button>
                    <el-button
                            link
                            type="primary"
                            size="small"
                            @click.prevent="adds(scope.row)"
                    >
                        新增
                    </el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog title="修改信息" v-model="dialogVisible">
        <el-form :model="stus">
            <el-input placeholder="序号" v-model="stus.flag" type="text" disabled/>
            <el-input placeholder="学院" v-model="stus.college" type="text" disabled/>
            <el-input placeholder="年级" v-model="stus.grade" type="text" />
            <el-button type="warning" @click="dialogVisible=false">取消</el-button>
            <el-button type="primary" @click="updates">确认</el-button>
        </el-form>
    </el-dialog>
    <el-dialog title="新增年级" v-model="dialogVisible1">
        <el-form :model="stu">
            <el-input placeholder="学院" v-model="stu.college" type="text" disabled/>
            <el-input placeholder="年级" v-model="stu.grade" type="text" />
            <el-button type="warning" @click="dialogVisible1=false">取消</el-button>
            <el-button type="primary" @click="add">确认</el-button>
        </el-form>
    </el-dialog>
    <el-pagination
            background
            layout="sizes,prev,pager,next,jumper,->,total"
            :page-size.sync="pageSize"
            :current-page.sync="pageNum"
            :page-sizes="[5,8,10,15]"
            :total="totals"
            :hide-on-single-page="true"
            @current-change="getList"
            @size-change="getList1"
    />
</template>
<script setup>
import { get,post } from '@/utils/request.js'
import {ElMessage} from 'element-plus'
import { ref,onMounted } from 'vue'
import moment from 'moment';
import { reactive } from 'vue'

const datas=ref([])
const totals=ref('')
const pageNum=ref(1)
const pageSize=ref(5)
const dialogVisible=ref(false)
const dialogVisible1=ref(false)

const stu = reactive({
college:'',
grade:''
})

const stus = reactive({
flag:'',
college:'',
grade:''
})

const findAll=()=>get('/grade/selectAll',(message)=>{
totals.value=message.length
datas.value=message
},(message)=>{
ElMessage.warning(message)
})

onMounted(()=>{
findAll()
})

const deleteRow = (index) => {
post('/grade/delete',{
flag:datas.value[index].flag
},(message)=>{
findAll()
ElMessage.success(message)
},(message)=>{
ElMessage.warning(message)
})
}

const update=(row)=>{
stus.flag=row.flag
stus.college=row.college
stus.grade=row.grade
dialogVisible.value=true
}

const updates=()=>{
post('/grade/update',{
flag:stus.flag,
college:stus.college,
grade:stus.grade,
},(message)=>{
findAll()
dialogVisible.value = false
ElMessage.success(message)
},(message)=>{
dialogVisible.value = false
ElMessage.warning(message)
})
}

const adds=(row)=>{
stu.college=row.college
dialogVisible1.value = true
}

const add=()=>{
post('/grade/add',{
grade:stu.grade,
college:stu.college
},(message)=>{
ElMessage.success(message)
dialogVisible1.value = false
findAll()
stu.college=''
stu.grade=''
},(message)=>{
ElMessage.warning(message)
dialogVisible1.value = false
stu.college=''
stu.grade=''
})
}

const getList=(pageNums)=>{
pageNum.value=pageNums
}

const getList1=(pageSizes)=>{
pageSize.value=pageSizes
}


</script>
<style scoped>
</style>